/**
 * 动态透明度效果函数, 按钮距离鼠标指针越远，透明度越低，距离鼠标指针越近，透明度越高。
 *
 * 该函数会在页面加载完成后立即执行，并且会监听鼠标移动事件，实时更新按钮的透明度。
 */
function dynamicOpacity() {
	/**
	 * 按钮事件处理函数
	 *
	 * @param {Element} button 按钮元素
	 *
	 * @param {MouseEvent} event 鼠标事件对象
	 */
	function buttonEvent(button, event) {
		/**
		 * 获取按钮的位置信息
		 */
		const buttonRect = button.getBoundingClientRect();
		/**
		 * 按钮中心的水平与垂直坐标
		 */
		const [buttonCenterX, buttonCenterY] = [buttonRect.left + buttonRect.width / 2, buttonRect.top + buttonRect.height / 2]
		/**
		 * 鼠标指针到按钮中心的水平与垂直距离
		 */
		const [distanceX, distanceY] = [event.clientX - buttonCenterX, event.clientY - buttonCenterY];
		/**
		 * 鼠标指针到按钮中心的距离
		 */
		const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
		/**
		 * 计算透明度：距离越远透明度越低（可根据需要调整最大影响距离）
		 */
		const opacity = Math.max(0, Math.min(1, 1 - (distance / 300)));
		// 应用透明度到按钮
		button.style.opacity = opacity;
	};
	/**
	 * 鼠标移动事件处理函数
	 *
	 * @param {MouseEvent} event 鼠标事件对象
	 */
	function handleMouseMove(event) {
		// 遍历所有按钮
		document.querySelectorAll('.power-button.live2d').forEach(button => buttonEvent(button, event));
		document.querySelectorAll('.message-actions-panel').forEach(button => buttonEvent(button, event));
	};
	// 监听鼠标移动事件
	document.addEventListener('mousemove', handleMouseMove);
};

/**
 * 窗口大小调整事件处理函数
 *
 * 当窗口宽度小于等于 SMALL_SCREEN_WIDTH_THRESHOLD 时，执行一系列界面布局调整操作
 */
function windowResizeEvent() {
	// 检查窗口宽度是否大于小屏幕阈值，若是则直接返回，不执行后续操作
	if (window.innerWidth > SMALL_SCREEN_WIDTH_THRESHOLD) {
		// 隐藏 Live2D 输入面板
		live2dInputPanel.style.display = "none";
		/**
		 * 捕获所有配置面板
		 */
		const configurePanels = document.querySelectorAll('.configure_panel');
		/**
		 * 检查所有配置面板是否都为隐藏状态
		 */
		const allHidden = Array.from(configurePanels).every(panel => panel.style.display === 'none');
		// 若所有配置面板都为隐藏状态，则显示聊天历史容器面板
		if (allHidden) chatHistoryContainerPanel.style.display = "flex";
		return;
	};
	// 关闭开发者模式
	isDeveloperMode = false;
	// 清除所有配置面板
	eraseAllConfigurePanel();
	// 关闭配置面板选项
	configurePanelOption = false;
	// 显示 Live2D 输入面板
	live2dInputPanel.style.display = "flex";
	// 隐藏聊天历史容器面板
	chatHistoryContainerPanel.style.display = "none";
	// 移除开发者模式切换按钮的点击状态样式
	developerModeButton.classList.remove("clicking");
	// 重置开发者模式切换按钮的图标
	developerModeButton.innerHTML = '<i class="fas fa-star-and-crescent"></i>';
};

/**
 * 窗口大小变化时的防抖处理函数
 * 清除之前的定时器，避免窗口大小频繁变化时重复触发事件，设置新的防抖定时器执行窗口大小调整逻辑
 */
function resizeEvent() {
	// 清除之前设置的定时器，防止重复触发窗口大小调整事件，保证防抖效果
	clearTimeout(resizeTimerId);
	// 设置防抖定时器，在 DEBOUNCE_DELAY 毫秒无窗口大小变化后，执行窗口大小调整事件处理函数
	resizeTimerId = setTimeout(() => windowResizeEvent(), DEBOUNCE_DELAY);
};